<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>


</head>
<body>
<div id="app">
    <!--父组件可以再引用子组件的时候  可以通过属性绑定的形式-->
    {{ msg.a }}
    <com1 :parentmsg="msg"></com1>

</div>
<script>
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            msg:{
                a:'父组件'
            }
        },
        methods:{
            getzi(data) {
                this.parentmsg.a = data
            }

        },
        components:{
           'com1':{
               template:'<h3 @click="add">子组件---{{ parentmsg.a }}</h3>',
               props:['parentmsg'],
               // 只读
               // 把父组件传递过来的parentmsg属性 先放在props定义一下,
              methods:{
                   add() {
                       this.parentmsg.a= 'andaodnasad'
                   },

              }
           }
        }
    })
</script>
</body>
</html>
